﻿<template>
    <div class="container" style="width:99%;margin-top:-25px;">
        <!-- 查询条件 -->
        <div class="query-box">
            <el-form :model="queryBox" status-icon ref="queryBox">
                <el-row>
                    <el-col :span="4">
                        <el-form-item label>
                            <el-input v-model="queryBox.activityCode" placeholder="请输入内容">
                                <template slot="prepend">活动编码</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label>
                            <el-input v-model="queryBox.activityName" placeholder="请输入活动名称">
                                <template slot="prepend">活动名称</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label>
                            <div class="depart-box">
                                <div class="slect-title">用户</div>
                                <el-select v-model="queryBox.systemUserName" filterable clearable>
                                    <el-option
                                        v-for="item in systemUserList"
                                        :key="item.id"
                                        :label="item.realName"
                                        :value="item.userName"
                                    ></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label prop="accountStatus">
                            <div class="depart-box">
                                <div class="slect-title">创建时间</div>
                                <el-date-picker
                                    v-model="time"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['00:00:00', '23:59:59']"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    format="yyyy-MM-dd HH:mm:ss"
                                ></el-date-picker>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="from-btns">
                <kt-button
                    :label="$t('action.reset')"
                    perms="true"
                    type="primary"
                    @click="reset('queryBox')"
                />
                <kt-button
                    :label="$t('action.search')"
                    perms="true"
                    type="primary"
                    @click="search"
                />
            </div>
        </div>
        <div class="add-btns fl">
            <kt-button
                :label="$t('新增推广链接')"
                type="primary"
                perms="ActivityManage:agentPromoteMange:add"
                @click="handleNewADD"
            ></kt-button>
        </div>
        <!--表格内容栏-->
        <div class="btns">
            <Crm-table
                class="table-width"
                AgentPromoteMange
                width="400"
                :data="pageResult"
                :columns="columns"
                :loading="loading"
                @findPage="findPage"
                @toSee="toSee"
                @download="download"
                @generateSubLink="generateSubLink"
                @onError="onError"
                @onCopy="onCopy"
                :showBatchDelete="false"
            ></Crm-table>
        </div>
        <!--新增界面-->
        <el-dialog
            title="新增活动链接"
            class="query-box"
            width="40%"
            :visible.sync="dialogVisible"
            @close="dialogVisibleClose"
            :close-on-click-modal="false"
        >
            <el-form :model="showAddBox" ref="addBox" :rules="dataFormRules" label-position="right">
                <el-row>
                    <el-col :span="11">
                        <el-form-item label prop="activityName">
                            <div class="depart-box">
                                <div class="slect-title">活动选择</div>
                                <el-select
                                    v-model="showAddBox.activityName"
                                    clearable
                                    @change="changeSel"
                                >
                                    <!-- <el-select clearable> -->
                                    <el-option
                                        v-for="item in activityManagerList"
                                        :key="item.id"
                                        :label="item.activityName"
                                        :value="item.activityName"
                                    ></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label>
                            <el-input
                                v-model="showAddBox.activityCode"
                                placeholder="请输入内容"
                                :disabled="true"
                            >
                                <template slot="prepend">活动编码</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" style="margin-left: 4%;">
                        <el-form-item label>
                            <el-input
                                v-model="showAddBox.activityName"
                                placeholder="请输入内容"
                                :disabled="true"
                            >
                                <template slot="prepend">活动名称</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <kt-table
                :data="pageResult2"
                :columns="columns2"
                :reserveSelection="true"
                @findPage="getUserList"
                ref="child"
                @selectionChange="selectionChange"
            ></kt-table>
            <div slot="footer" style="text-align:center" class="dialog-footer">
                <el-button :size="size" @click.native="dialogVisibleClose">{{ $t("action.cancel") }}</el-button>
                <el-button
                    :size="size"
                    type="primary"
                    @click.native="submitAdd"
                    :loading="editLoading"
                >{{ $t("action.submit") }}</el-button>
            </div>
        </el-dialog>
        <!-- 查看二维码 -->
        <el-dialog
            title="查看二维码"
            width="20%"
            :visible.sync="addFollow"
            :close-on-click-modal="false"
        >
            <img :src="url+'/'+imgURL" alt />
            <p v-if="popData.activityName">活动名称：{{popData.activityName}}</p>
            <p v-if="popData.systemUserRealName">姓名：{{popData.systemUserRealName}}</p>
            <kt-button
                class="stu-btn"
                label="下载二维码"
                perms="true"
                type="primary"
                size="medium"
                @click="download(popData2)"
            />
        </el-dialog>
    </div>
</template>
<script>
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import KtTable from "@/views/Core/KtTable";
import { CodeToText } from "element-china-area-data";
import { baseUrl } from "@/utils/global";
import axios from "axios";
import Cookies from "js-cookie";
export default {
    name: "Xuecoo",
    components: {
        CrmTable,
        KtButton,
        KtTable
    },
    data() {
        return {
            size: "mini",
            editLoading: false,
            queryBox: {},
            addBox: {},
            showAddBox: {
                activityName: "",
                activityCode: "",
                systemUserName: "",
                systemUserCode: "",
                systemUserName2: "",
                frontUserName: "",
                frontUserCode: "",
                frontUserName: "",
                schoolName: "",
                schoolCode: "",
                schoolName: "",
                clazzName: ""
            }, //回显
            mytime: "",
            dialogVisible: false, // 新增界面是否显示
            width: 200,
            columns: [
                { type: "index", label: "序号", minWidth: 50 },
                { prop: "activityCode", label: "活动编码", minWidth: 120 },
                { prop: "activityName", label: "活动名称", minWidth: 100 },
                { prop: "systemUserRealName", label: "姓名", minWidth: 190 },
                { prop: "createDate", label: "创建时间", minWidth: 120 },
                { prop: "childLink", label: "推广子链接", minWidth: 120 }
            ],
            columns2: [
                { type: "index", label: "序号", minWidth: 50 },
                { prop: "realName", label: "真实姓名", minWidth: 120 },
                { prop: "userName", label: "用户名", minWidth: 100 }
            ],
            pageRequest: { pageNum: 1, pageSize: 10 },
            pageRequest2: { pageNum: 1, pageSize: 10 },
            pageResult: {
                content: []
            },
            pageResult2: {
                content: []
            },
            // 限制跟进时间
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
                }
            },
            loading: false, // 加载标识
            activityManagerList: [], //活动列表
            queryUserList: [], //大区经理列表
            systemUserList: [], //三方列表
            schoolList: [], //学校列表
            popData: "",
            popData2: "",
            imgURL: "",
            addFollow: false, //显示跟进窗口
            url: baseUrl,
            dataFormRules: {
                activityName: [
                    { required: true, message: "请选择活动", trigger: "change" }
                ]
                // systemUserName: [
                //   { required: true, message: "请选择大区经理", trigger: "change" }
                // ],
                // frontUserName: [{ required: true, message: "请选择三方", trigger: "change" }],
                // schoolName: [{ required: true, message: "请选择学校", trigger: "change" }],
                // clazzName: [{ required: true, message: "请设置班级", trigger: "blur" }]
            },
            time: "",
            userInfoList_option: [],
            userListLoading: false,
            selections: []
        };
    },
    mounted() {
        this.get_dataTime();
        // 获取活动列表
        this.$api.agent.getActivityManage().then(res => {
            this.activityManagerList = res.activityManagerList;
        });
        // 获取大区经理列表
        this.$api.dropdown.users().then(res => {
            this.systemUserList = res.userInfoList;
        });
        // 获取三方列表
        this.queryUserList = JSON.parse(localStorage.getItem("SFcacheList"));
        // 获取学校列表
        this.$api.oem.schoolList().then(res => {
            this.schoolList = res.data;
        });
    },
    methods: {
        // 活动选择变化操作
        changeSel(data) {
            this.showAddBox.activityCode = "";
            let nowData = this.activityManagerList.find(item => {
                return item.activityName === data;
            });
            this.showAddBox.activityCode = nowData.activityCode;
            this.addBox.activityId = nowData.id;
        },
        // 查询招商经理
        getUserList(data, callback) {
            if (data != null) {
                this.pageRequest2 = data.pageRequest;
            }
            let deptTypeStr = "2,3";
            let dataParams = { deptTypeStr, ...this.pageRequest2 };
            this.$api.person
                .findPage(dataParams)
                .then(res => {
                    if (res.userInfoList) {
                        let content = {
                            content: res.userInfoList,
                            totalSize: res.total
                        };
                        this.pageResult2 = content;
                    }
                })
                .then(data != null ? data.callback : "");
        },
        // 选择三方变化操作
        changeUserList(data) {
            this.showAddBox.frontUserCode = "";
            let nowData = this.queryUserList.find(item => {
                return item.threePartName === data;
            });
            this.showAddBox.frontUserCode = nowData.userName;
            this.addBox.frontUserId = nowData.id;
        },
        // 大区经理变化操作
        changeSystem(data) {
            this.showAddBox.systemUserCode = "";
            let nowData = this.systemUserList.find(item => {
                return item.userName === data;
            });
            this.showAddBox.systemUserCode = nowData.userName;
            this.addBox.systemUserId = nowData.id;
            this.showAddBox.systemUserName2 = nowData.realName;
        },
        // 学校列表变化操作
        changeSchool(data) {
            this.showAddBox.schoolCode = "";
            let nowData = this.schoolList.find(item => {
                return item.schoolName === data;
            });
            this.showAddBox.schoolCode = nowData.schoolCode;
            this.addBox.schoolId = nowData.id;
        },
        // 搜索
        search() {
            this.loading = true;
            this.pageRequest.pageNum = 1;
            this.queryBox.isConsultant = 3;
            if (this.queryBox.systemUserName) {
                this.systemUserList.forEach(item => {
                    if (item.userName === this.queryBox.systemUserName) {
                        this.queryBox.systemUserId = item.id;
                    }
                });
            }
            if (this.queryBox.frontUserName) {
                this.queryUserList.forEach(item => {
                    if (item.threePartName === this.queryBox.frontUserName) {
                        this.queryBox.frontUserId = item.id;
                    }
                });
            }
            if (this.queryBox.schoolName) {
                this.schoolList.forEach(item => {
                    if (item.schoolName === this.queryBox.schoolName) {
                        this.queryBox.schoolId = item.id;
                    }
                });
            }
            if (this.time) {
                this.queryBox.createStartDate = this.time[0];
                this.queryBox.createStopDate = this.time[1];
            }
            this.findPage(null);
        },
        get_dataTime() {
            let dateTime = new Date();
            // this.saveData.contractDate = this.dateFormat(dateTime);
            let mytime = dateTime.toLocaleTimeString("chinese", {
                hour12: false
            }); //获取当前时间
            this.mytime = mytime;
        },
        // 获取分页数据
        findPage: function(data) {
            if (data !== null) {
                this.loading = true;
                this.pageRequest = data.pageRequest;
            }
            this.queryBox.pageSize = this.pageRequest.pageSize;
            this.queryBox.pageNum = this.pageRequest.pageNum;
            this.queryBox.isConsultant = 3;
            this.$api.agent
                .extensionManPageList(this.queryBox)
                .then(res => {
                    if (res.result == 1) {
                        let content = {
                            content: res.data,
                            totalSize: res.total
                        };
                        this.pageResult = content;
                        this.loading = false;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                })
                .then(data != null ? data.callback : "");
        },
        DateMinus(date1, date2) {
            //date1:小日期   date2:大日期
            var sdate = new Date(date1);
            var now = new Date(date2);
            var days = now.getTime() - sdate.getTime();
            var day = parseInt(days / (1000 * 60 * 60 * 24));
            return day;
        },
        // 生成子链接
        generateSubLink(params) {
            this.$api.agent
                .generateSubLink({ activityId: params.row.id })
                .then(res => {
                    if (res.result == 1) {
                        this.$message({
                            message: res.msg,
                            type: "success"
                        });
                        params.row.status = 1;
                        if (params.row.status == 1) {
                            params.row.statusInfo = "已生成子链接";
                        } else {
                            params.row.statusInfo = "未生成子链接";
                        }
                        // this.findPage(null)
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                });
        },
        // 重置
        reset(queryBox) {
            this.queryBox = {};
            this.time = "";
            this.findPage(null);
        },
        handleNewADD() {
            this.dialogVisible = true;
            this.pageRequest2.pageNum = 1;
            if (this.selections.length > 0) {
                this.$refs.child.clearSelect();
            }
        },
        // 新增提交
        submitAdd() {
            this.$refs["addBox"].validate(valid => {
                //
                if (valid) {
                    this.addBox.clazzName = this.showAddBox.clazzName;
                    this.addBox.isConsultant = 3; //1: 推广链接   2: 个人推广链接   3: 招商推广链接
                    this.editLoading = true;
                    let params = Object.assign({}, this.addBox);
                    this.$api.agent.saveInfoAgentActivity(params).then(res => {
                        if (res.result == 1) {
                            this.$message.success("操作成功!");
                            this.dialogVisible = false;
                            this.$refs["addBox"].resetFields();
                            this.showAddBox.activityName = "";
                            this.showAddBox.activityCode = "";
                            this.showAddBox.systemUserName = "";
                            this.showAddBox.systemUserCode = "";
                            this.showAddBox.systemUserName2 = "";
                            this.showAddBox.frontUserName = "";
                            this.showAddBox.frontUserCode = "";
                            this.showAddBox.frontUserName = "";
                            this.showAddBox.schoolName = "";
                            this.showAddBox.schoolCode = "";
                            this.showAddBox.clazzName = "";
                        } else {
                            this.$message.error("操作失败, " + res.msg);
                        }
                        this.findPage(null);
                        this.editLoading = false;
                    });
                }
            });
        },
        dialogVisibleClose() {
            this.dialogVisible = false;
            this.showAddBox.activityName = "";
            this.showAddBox.activityCode = "";
            this.showAddBox.systemUserName = "";
            this.showAddBox.systemUserCode = "";
            this.showAddBox.systemUserName2 = "";
            this.showAddBox.frontUserName = "";
            this.showAddBox.frontUserCode = "";
            this.showAddBox.frontUserName = "";
            this.showAddBox.schoolName = "";
            this.showAddBox.schoolCode = "";
            this.showAddBox.clazzName = "";
        },
        // 查看二维码
        toSee: function(params) {
            this.addFollow = true;
            this.popData = params.row;
            this.popData2 = params;
            this.$api.agent
                .extensionManQueryQCode({ id: params.row.id })
                .then(res => {
                    if (res.result == 1) {
                        this.imgURL = res.data.path;
                    }
                });
        },
        // 下载二维码
        download: function(params) {
            this.$api.agent
                .extensionManQueryQCode({ id: params.row.id })
                .then(res => {
                    if (res.msg != "") {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    } else {
                        this.downloadIamge(
                            baseUrl + "/" + res.data.path,
                            params.row.activityName
                        );
                    }
                });
        },
        downloadIamge(imgsrc, name) {
            //下载图片地址和图片名
            var image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");
            image.onload = function() {
                var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                var context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

                var a = document.createElement("a"); // 生成一个a元素
                var event = new MouseEvent("click"); // 创建一个单击事件
                a.download = name || "photo"; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = imgsrc;
        },
        onCopy(params) {
            this.$message({
                message: "复制成功" + params.text,
                type: "success"
            });
        },
        onError(params) {
            this.$message({
                message: "复制失败",
                type: "error"
            });
        },
        // 获取选中的表格数据
        selectionChange: function(selections) {
            this.selections = selections.selections;
            let frontUserIdList = [];
            this.selections.map(item => {
                frontUserIdList.push(item.id);
            });
            this.addBox.systemUserIdList = frontUserIdList;
        }
    }
};
</script>
<style>
@import url("../../assets/queryBox.css");
</style>
<style lang="scss" scoped>
.checked-person {
    font-weight: 500;
    display: inline-block;
    text-align: center;
    margin: 3% 0 3% 0;
}
.batchdistribution-pop-tit {
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    color: #303133;
}
.el-dialog__wrapper .el-form-item__content {
    margin-left: 0;
}
.demo-form-inline {
    width: 90%;
    margin: 0 auto;
    .el-dialog__body .el-input {
        width: 93% !important;
    }
    .el-select {
        width: 100% !important;
    }
    .tit {
        display: inline-block;
        margin-top: 10%;
    }
}
.btn .el-button {
    padding: 9px 5px !important;
}
</style>
<style>
.batchdistribution-pop .el-dialog__header {
    padding: 0 0 0 0 !important;
}
</style>
